<template>
  <div class="modal modal-blur fade" :id="modalId" tabindex="-1" role="dialog" aria-hidden="true" ref="componentModalRef">
    <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
      <div class="modal-content">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        <div class="modal-status bg-success"></div>
        <div class="modal-body text-center py-4">
          <!-- Download SVG icon from http://tabler-icons.io/i/circle-check -->
          <div v-html="svgImg"></div>
          <h3>{{ title }}</h3>
          <div class="text-secondary">{{ message }}</div>
        </div>
        <div class="modal-footer">
          <div class="w-100">
            <div class="row">
              <div class="col"><a href="#" class="btn w-100" data-bs-dismiss="modal" @click="handleCancel">
                {{ cancelText }}
              </a></div>
              <div class="col"><a href="#" class="btn btn-success w-100" data-bs-dismiss="modal" @click="handleConfirm">
                {{ confirmText }}
              </a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, defineProps, defineEmits, onMounted, defineExpose} from 'vue';
import { Modal } from 'bootstrap';


// 定义组件接收的属性
const props = defineProps({
  modalId: {
    type: String,
    default: 'modal-small'
  },
  svgImg: {
    type: String,
    default: ' <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mb-2 text-danger icon-lg"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 9v4" /><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z" /><path d="M12 16h.01" /></svg>'
  },
  title: {
    type: String,
    default: 'Are you sure?'
  },
  message: {
    type: String,
    default: 'If you proceed, you will lose all your personal data.'
  },
  cancelText: {
    type: String,
    default: 'Cancel'
  },
  confirmText: {
    type: String,
    default: 'Yes, delete all my data'
  }
});

const emits = defineEmits(['cancel', 'confirm']);


const svgImg = ref(props.svgImg);
const title = ref(props.title);
const message = ref(props.message);
const cancelText = ref(props.cancelText);
const confirmText = ref(props.confirmText);

const componentModalRef = ref(null);
let modalInstance = null;
let confirmCallback = null;


// 在组件挂载时初始化 Bootstrap 的 Modal
onMounted(() => {
  if (componentModalRef.value) {
    modalInstance = new Modal(componentModalRef.value);
  }
});

// 打开模态框
const openInfoModal = (outMessage, callback) => {
  if (modalInstance) {
    svgImg.value = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"\n' +
        '         stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="icon mb-2 text-green icon-lg">\n' +
        '      <path stroke="none" d="M0 0h24v24H0z" fill="none"/>\n' +
        '      <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/>\n' +
        '      <path d="M9 12l2 2l4 -4"/>\n' +
        '    </svg>';
    title.value = '信息';
    message.value = outMessage;
    cancelText.value = '取消';
    confirmText.value = '确定';
    confirmCallback = callback;
    modalInstance.show();
  }
};

const openWarnModal = (outMessage, callback) => {
  if (modalInstance) {
    svgImg.value = ' <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mb-2 text-danger icon-lg"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 9v4" /><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z" /><path d="M12 16h.01" /></svg>';
    title.value = '警告';
    message.value = outMessage;
    cancelText.value = '取消';
    confirmText.value = '确定';
    confirmCallback = callback;
    modalInstance.show();
  }
};

// 关闭模态框
const handleCancel = () => {
  emits('cancel');

};

// 确认动作
const handleConfirm = () => {
  emits('confirm');
  if (confirmCallback) {
    confirmCallback();
  }
};

// 使用 defineExpose 暴露方法
defineExpose({
  openInfoModal, openWarnModal
});
</script>

<style scoped>
/* 样式部分 */
</style>